<style lang="less" scoped>
.org {
  color:#f0a800 !important;
}
.order-detail-info {
  border-bottom:1px solid #ddd;
}
.contain {
  padding:0;
}
.vMask{
  z-index:999;
  position: absolute;
  height:100%;
  width:100%;
}
.rowNo {
  border-radius:0.4rem;
  background:#00aaeb;
  color:#fff;
  padding:0 0.1rem;
  text-align: center;
  margin-right:0.1rem;
}
.no-pdt {
  padding-top:0 !important;
}
.rpiNum {
  color:#888 !important;
}
</style>

<template>
  <div class="contain">
    <div class="vMask" v-if="showMask"></div>
    <div class="order-detail-top">
      <div class="order-detail-header">
        <span class="f-l">业务单号：<i>{{data.BillNo}}</i></span>
        <span class="org f-r ft12">{{data.BillState === 'R02'?'待受理':'已受理'}}</span>
      </div>
      <ul class="order-detail-info">
        <li class="displayflex">
          <label>退货时间</label>
          <p class="flex1">{{data.BillDate | time}}</p>
        </li>
        <!-- <li class="displayflex">
          <label>订货时间</label>
          <p class="flex1">{{data.InputDate | time}}</p>
        </li> -->
        <!-- <li class="displayflex">
          <label>入库单号</label>
          <p class="flex1"></p>
        </li> 
        <li class="displayflex">
          <label>单据类型</label>
          <p class="flex1"></p>
        </li> -->
        <li class="displayflex">
          <label>业务员</label>
          <p class="flex1">{{data.BuyerName}}</p>
        </li>
        <!-- <li class="displayflex">
          <label>供应商</label>
          <p class="flex1">{{data.SupplierbName}}</p>
        </li> -->
        <li class="displayflex">
          <label>退货医院</label>
          <p class="flex1">{{data.MedName}}</p>
        </li>
        <li class="displayflex">
          <label>退货地址</label>
          <p class="flex1">{{data.Address}}</p>
        </li>
      </ul>
    </div>

    <div class="detail-customs mb30">
      <p>退货原因：{{data.Reason}}</p>
    </div>

    <scroller lock-x scrollbar-y use-pullup height="-270":pullup-config="ScrollerConfig" ref="Scroller">
      <div class="detail-tab-lft">
        <div class="detail-supply">
          <i class="iconfont icon-supplier ft17"></i> {{data.SupplierbName}}
        </div>
        <div class="detail-goods-list">
          <div class="displayflex list-goods-warp" v-for="item in details">
            <div class="pic">
              <img :src="item.PictContent | filterImgUrl">
            </div>
            <div class="msg flex1">
              <p class="ft17">{{item.ReturnsGoodsName}}</p>
              <p>规格：{{item.SupplierGoodsSpec}}</p>
              <p>商品编码：{{item.SupplierGoodsCode}}</p>
              <p>单价：￥{{item.SupplierPrice | fmoney}}</p>
              <p>总价：￥{{item.SupplierRpiQty * item.SupplierPrice | fmoney}}</p>

              <div class="displayflex">
                <p class="no-pdt rpiNum">退货数：</p>
                <div class="flex1">
                  <p class="no-pdt rpiNum"><em class="rowNo">医</em>{{item.ylyRpiQty}}{{item.ReturnsUnit}}</p>
                  <p><em class="rowNo">供</em>{{item.SupplierRpiQty}}{{item.ReturnsUnit}}</p>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>
    </scroller>


    <div class="detail-bottom displayflex">
      <div class="flex1 btn-grp">
        <div class="btn" @click="recordInvoice(data)" v-if="data.BillState === 'R02'">录入发票</div>
        <div class="btn" @click="recordInvoice(data, 'Y')" v-else>发票信息</div>
        <div class="btn" @click="accept()" v-if="data.BillState === 'R02'">受理</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'refundOperate',
  data() {
    return {
      data: {},
      details: [],
      ScrollerConfig:{
        content: '',
        downContent: '',
        height: 0,
        loadingContent: '',
        upContent: '',
      },
      showMask:false,
    };
  },
  computed: {
    userinfo() {
      return localStorage.getItem('userinfo') === null?null:JSON.parse(localStorage.getItem('userinfo'));
    },
  },
  watch: {
    
  },
  created() {
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
      
    });
  },
  methods: {
    //获取详情
    getData() {
      var self = this;
      var query = {
        Guid: this.$route.query.Guid,
        TenantGuid: this.userinfo.TenantGuid,
        CorpGuid: this.userinfo.CorpGuid
      };
      this.Ajax.post("GetRefundDetail", query).then((res) => {
        if (res.IsSuccess) {
          this.data = res.Data;
          res.Data.details.forEach(x => {
            if(x.UnitTimes && x.UnitTimes*1 > 0){
              x.ylyRpiQty = x.SupplierRpiQty / x.UnitTimes*1;
            } else {
              x.ylyRpiQty = x.SupplierRpiQty;
            }
          });
          this.details = res.Data.details;
        } else {
          this.Toast({
            message: res.ErrorMessage || '出现错误',
          });
        }
      }).catch((e) => {
        this.Toast({
          message: e.toString(),
        });
      });
    },

    //受理退货单
    accept() {
      this.showMask = true;
      var query = {
        Guid: this.data.Guid,
        TenantGuid: this.userinfo.TenantGuid,
        CorpGuid: this.userinfo.CorpGuid,
        UpdateUserID: this.userinfo.StaffID,
        UpdateUserName: this.userinfo.Name,
      };
      this.Ajax.post("OrderAccept", query).then((res) => {
        if (res.IsSuccess) {
          this.Toast({
            message: '受理成功',
            duration: 1000,
          });
          setTimeout(() => { this.$router.push({ path: 'refundList' }) }, 1000)
        } else {
          this.showMask = false;
          this.Toast({
            message: res.ErrorMessage || '出现错误',
            duration: 1000,
          });
          if(res.ErrorMessage && res.ErrorMessage.indexOf('已受理') > -1){
            setTimeout(() => { this.$router.push({ path: 'refundList' }) }, 1000)
          }
        }
      }).catch((e) => {
        this.showMask = false;
        this.Toast({
          message: e.toString(),
        });
      });
    },

    //录入发票
    recordInvoice(data, viewonly){
      let query = {
        Guid: data.Guid,
        MedGuid: data.MedGuid,
        BillNo: data.BillNo,
        SettleBillNo: data.BillNo,
      }
      if(viewonly === 'Y'){
        query.viewOnly = 'Y';
      }
      this.$router.push({
        path: '/order/recordInvoice',
        query: query
      })
    },
  },
}
</script>
